<template>
  <view class="container flex-column">
    <view class="padding-lr-30 padding-bottom-30 width-full flex-column flex-item">
      <view class="title padding-top-30 padding-bottom-30">
        <chart-title :title="data.title" full :type="data.type" @click="jump" />
      </view>

      <view class="padding-lr-12 flex-column flex-item">
        <view class="chart-box flex-column flex-item" :class="{relative:!showData}">
          <qiun-data-charts
            v-show="showData"
            class="chart-box flex-column flex-item"
            type="bar"
            :opts="options"
            :localdata="localdata"
            :canvas2d="true"
            :loading-type="5"
            canvas-id="tBaBaVehicleFullCharts"
          />
          <l-no-data v-show="!showData" text="暂无数据" type="data" />
        </view>
      </view>
    </view>
    <safe-area-bottom />
  </view>
</template>

<script>
import ChartTitle from '@/pages/statistics/components/chart-title/chart-title'
import options from './index'
export default {
  name: 'Vehicle',
  components: {
    ChartTitle
  },
  data() {
    return {
      data: {},
      localdata: [],
      options,
      showData: true,
      length: 0
    }
  },
  onLoad(e) {
    this.data = e
    const data = JSON.parse(e.data)
    this.length = data.length
    this.localdata = JSON.parse(this.data.data)
    this.showData = !!this.localdata.length
  }
}
</script>

<style scoped lang="scss">
@import "../index";
.title{
  width:690rpx;
  @include position(sticky,0);
  z-index:10;
  background:#ffffff;
}
.chart-box{
  position:relative;
  width:666rpx;
}
</style>
